<!DOCTYPE html>
<html lang="en">
  <head>
    <title>星星勋章</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">    
  </head>
  <body>
    <!-- 主体显示 -->
      <ul class="nav nav-pills" role="tablist">
        <li role="presentation" class="active"><a href="#task_list" aria-controls="task_list" role="tab" data-toggle="tab">目标列表查询</a></li>
        <li role="presentation"><a href="#task_add" aria-controls="task_add" role="tab" data-toggle="tab">目标添加</a></li>
        <li role="presentation"><a href="#task_log_list" aria-controls="task_log_list" role="tab" data-toggle="tab">目标日志查询</a></li>
      </ul>        
      <div class="tab-content">
        <!-- 页签1 查询 -->
        <div role="tabpanel" class="tab-pane active" id="task_list" style="margin-top:30px">
            <div class="form-inline">
                <div class="form-group col-xs-6">
                  <label for="taskNameQuery">目标名称</label>
                  <input type="text" class="form-control" style="width: 80%" id="taskNameQuery" placeholder="支持模糊查询">
                </div>
                <button type="buttun" class="btn btn-success btn-sm" id="submitQuery">查询</button>     
            </div>         
            <div class="bs-example" data-example-id="hoverable-table" style="margin-top:40px">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th width='15%' class='info'>任务名称</th>
                      <th width='12%' class='info'>创建时间</th>
                      <th width='12%' class='info'>更新时间</th>
                      <th width='14%' class='info'>任务进度</th>
                      <th width='20%' class='info'>进度描述</th>
                      <th width='16%' class='info'>操作</th>
                    </tr>
                  </thead>
                  <tbody id="data_body">
                  </tbody>
                </table>
              </div> 
              <div id='pageFoot'>
              </div>       
          </div>
        <!-- 页签1 end-->
        <!-- 页签2 新增任务 -->
        <div role="tabpanel" class="tab-pane" id="task_add" style="margin-top:30px">
            <form action="#" class="probootstrap-form col-xs-8">
              <div class="form-inline">
                  <div class="form-group">
                    <label for="taskName">目标名称</label>
                    <input type="text" class="form-control" id="taskName" placeholder="目标名称">
                  </div>
                  <div class="form-group">
                    <label for="expectNum">预期工作量</label>
                    <input type="text" class="form-control" id="expectNum" placeholder="星星数量如:50">
                  </div>
                </div>              
              <div class="form-group">
                <label for="task_desc">描述</label>
                <textarea cols="30" rows="10" class="form-control" id="task_desc"></textarea>
              </div>
              <div class="form-group">
                <input type="button" class="btn btn-success" id="saveTask" value="保存">
              </div>
            </form>          
        </div>
        <!-- 页签2 end-->
        <!-- 页签3 任务日志查询 -->
        <div role="tabpanel" class="tab-pane" id="task_log_list" style="margin-top:30px">
	        <table class="table table-hover">
	            <tbody>
	              <tr>
	                <th class="info">任务名称</th>
	                <td>
	                	<input type="text" class="form-control" id="taskName2" placeholder="请输入任务名">
	                </td>
	              </tr>
	              <tr>
	                <th class="info">创建时间</th>
	                <td>
		               <div class="input-group date form_datetime col-md-8" data-link-field="dtp_input1">
		                 <input class="form-control" id="createTimeBegin2" type="text" readonly>
		                 <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
		               </div>	                	
 		                 <span>至</span>
		               <div class="input-group date form_datetime col-md-8" data-link-field="dtp_input1">
		                 <input class="form-control" id="createTimeEnd2" type="text" readonly>
		                 <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
		               </div>	                	
	                </td>
	              </tr>
	            </tbody>
	        </table>        
            <button type="buttun" class="btn btn-success btn-sm" id="querybtn2">查询</button>     
            <div class="bs-example" data-example-id="hoverable-table" style="margin-top:40px">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th width='10%' class='info'>任务名称</th>
                      <th width='10%' class='info'>创建时间</th>
                      <th width='6%' class='info'>星星</th>
                      <th width='40%' class='info'>日志内容</th>
                      <th width='6%' class='info'>操作</th>
                    </tr>
                  </thead>
                  <tbody id="data_body2">
                  </tbody>
                </table>
              </div> 
              <div id='pageFoot2'>
              </div>       
          </div>
        <!-- 页签3 end-->           
      </div>          
      <!-- 页签content end-->
    
    <!-- 模态框1，进度调整 -->
    <div class="modal fade" id="task_progress_modal" tabindex="-1" role="dialog" >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="task_progress_modal_title">No Title</h4>
            </div>
            <div class="modal-body">
              <form>
                <input type="hidden" id="pgTaskid"/>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">星星</label>
                  <input type="text" class="form-control" id="addStarNum">
                </div>
                <div class="form-group">
                  <label for="message-text" class="control-label">记录</label>
                  <textarea class="form-control" id="addStarDesc"></textarea>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" id='progressSubmit' class="btn btn-primary">提交</button>
            </div>
          </div>
        </div>
      </div>
    <!-- 模态框2，任务详情 -->
    <div class="modal fade" id="task_detail_modal" tabindex="-1" role="dialog" >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">任务详情</h4>
            </div>
            <div class="modal-body">
                <table class="table table-hover">
                    <tbody>
                      <tr>
                        <th class="info">任务名称</th><td id="taskNameShow"></td>
                      </tr>
                      <tr>
                        <th class="info">任务id</th><td id="idShow"></td>
                      </tr>
                      <tr>
                        <th class="info">创建时间</th><td id="createTimeShow"></td>
                      </tr>
                      <tr>
                        <th class="info">更新时间</th><td id="updateTimeShow"></td>
                      </tr>
                      <tr>
                        <th class="info">预期星星</th><td id="expectNumShow"></td>
                      </tr>
                      <tr>
                        <th class="info">现在星星</th><td id="starNumShow"></td>
                      </tr>
                      <tr>
                        <th class="info">任务说明</th><td id="taskDescShow"></td>
                      </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
          </div>
        </div>
      </div>   
    <!-- 模态框3，任务分解展示 -->
    <div class="modal fade" id="assignment_modal" tabindex="-1" role="dialog" >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="assignment_modal_title">No Title</h4>
          </div>
          <div class="modal-body">
            <table class="table table-hover">
              <tbody>
                <tr>
                  <th class="info">分解id</th><td id="assiId"></td>
                  <input type="hidden" id="assiTaskId"/>
                </tr>
                <tr>
                  <th class="info">预期分解星星</th>
                  <td>
                    <select id="assiExpectNum" class="form-control" >
                        <option value="">请选择</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <th class="info">任务分解执行模式</th>
                  <td>
                    <select id="assiTaskModel" class="form-control" >
                        <option value="">请选择</option>
                        <option value="00">满星自动停止</option>
                        <option value="01">满星继续执行</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <th class="info">任务分解周期</th>
                  <td>
                    <select id="assiCircleModel" class="form-control" >
                        <option value="">请选择</option>
                        <option value="00">每日</option>
                        <option value="01">工作日</option>
                        <option value="02">周末</option>
                        <option value="03">每周</option>
                        <option value="04">每月</option>
                        <option value="05">每年</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <th class="info">任务分解状态</th>
                  <td>
                    <select id="assiState" class="form-control" >
                        <option value="">请选择</option>
                        <option value="00">进行中</option>
                        <option value="01">已完成</option>
                        <option value="02">暂停</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <th class="info">创建时间</th><td id="assiCreateTime"></td>
                </tr>
                <tr>
                  <th class="info">更新时间</th><td id="assiUpdateTime"></td>
                </tr>
                <tr>
                  <th class="info">已执行次数</th><td id="assiRunTime"></td>
                </tr>
                <tr>
                  <th class="info">任务分解说明</th>
                  <td>
                    <textarea class="form-control" id="assiDesc"></textarea>
                  </td>
                </tr>
              </tbody>
            </table>            
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" id='assignmentSubmit' class="btn btn-primary">新增</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框4，日志详情 -->
    <div class="modal fade" id="log_modal" tabindex="-1" role="dialog" >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="log_modal_title">task name</h4>
          </div>
          <div class="modal-body" id="log_modal_content">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>        
    <!-- 模态框 end-->

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>    
    <script src="js/main.js"></script>
	<script src="js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
	<script src="js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="UTF-8"></script>    
    <script src="mobile_task.html.js" type="text/javascript" charset="utf-8"></script>

  </body>
</html>